<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>身份认证</title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/identify.css" />
		<script src="js/jquery.min.js"></script>
	</head>
	<body style="background: #fff;">
		<!--nav 可复用-->
		<div class="nav">
			<p onclick="javascript:history.back(-1);"><img src="images/箭头2.png" alt="" /></p>
			<p>身份认证</p>
		</div>
		<!--identify bg-->
		<div class="identify_bg">
			<p>实名认证</p>
			<p>提升信任</p>
		</div>
		<div class="identify_login">
			<p class="indetify_login_line1">
				真实姓名&nbsp;:&nbsp;<input type="text" placeholder="请输入姓名"/>
			</p>
			<p class="indetify_login_line1">
				身份证号&nbsp;:&nbsp;<input type="text" placeholder="请输入身份证号码"/>
			</p>
		</div>
		<div class="identify_pic">
			<form action="">
				<input type="file" accept="image/*" class="myfile" onchange="loadImg()"/>
				<img src="images/identify-2.png" alt="" class="identify_pic2"/>
				<img src="images/identify-77.png" alt="" />
				<p>01</p>
				<img src="images/identify-1.png" alt="" />
				<p>点击上传您的身份证<span>正面照</span></p>
				<button>提交</button>
				<p>以上信息仅用于核实您的网络身份,为会员征友提供安全保障,穆穆网将严格对您的信息保密,请放心认证。</p>
			</form>
		</div>
		<!--bottom 可复用-->
		<div class="mumu_bottom">
			<div class="mumu_bottom_line1" onclick="javascript:window.location.href='index.html'">
				<img src="images/tab4.png" alt="穆穆" />
				<p>穆穆</p>
			</div>
			<div class="mumu_bottom_line1" onclick="javascript:window.location.href='nearby.html'">
				<img src="images/tab3.png" alt="附近" />
				<p>附近</p>
			</div>
			<div class="mumu_bottom_line1" onclick="javascript:window.location.href='personletter.html'">
				<img src="images/tab2.png" alt="信息" />
				<p>私信</p>
			</div>
			<div class="mumu_bottom_line1">
				<img src="images/tab5.png" alt="动态" onclick="javascript:window.location.href='dynamic.html'"/>
				<p>动态</p>
			</div>
			<div class="mumu_bottom_line1 active">
				<img src="images/tab1-1.png" alt="我的" />
				<p>我的</p>
			</div>
		</div>
		<script>
			function loadImg(){
				var file = $('.identify_pic').find("input")[0].files[0];
				var reader = new FileReader();
				var imgFile;
				reader.onload=function(e){
					alert('文件读取完成');
					imgFile = e.target.result;
					console.log(imgFile);
					$('.identify_pic2').attr('src',imgFile);
				};
				reader.readAsDataURL(file);
			}
		</script>
	</body>
</html>
